// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.

// minimal imports from bootstrap - only variables and mixins
@import "./bootstrap/less/variables.less";
@import "./bootstrap/less/mixins.less";

// minimal imports from font-awesome
@import "./font-awesome/less/variables.less";

// import variables, mixins from Notebook
// layout mixins
@import "./flexbox.less";
@import "./mixins.less";
@import "./progress-modal.less";

@widget-width: 300px;
@widget-width-short: 148px;
@border-radius-base: 2px;

// From Material Design Lite
@shadow-key-umbra-opacity: 0.2;
@shadow-key-penumbra-opacity: 0.14;
@shadow-ambient-shadow-opacity: 0.12;

.jupyter-widgets {
    & {
        margin: 2px;
    }
    &.widget-container {
        margin: 0px;
    }
}

.widget-area {
    /*
    LESS file that styles Jupyter widgets and the area they sit in.

    The widget area typically looks something like this:
     +------------------------------------------+
     | widget-area                              |
     |  +--------+---------------------------+  |
     |  | prompt | widget-subarea            |  |
     |  |        | +-----------------------+ |  |
     |  |        | |         widget        | |  |
     |  |        | +-----------------------+ |  |
     |  |        | +-----------------------+ |  |
     |  |        | |         widget        | |  |
     |  |        | +-----------------------+ |  |
     |  +--------+---------------------------+  |
     +------------------------------------------+
    */

    page-break-inside : avoid;
    .hbox();

    .widget-subarea {
        padding     : 0.4em 0 0.4em 0;

        .border-box-sizing();
        .box-flex2();
        .align-start();
        .vbox();
    }

    &.connection-problems .prompt:after {
        content: @fa-var-chain-broken;
        font-family: 'FontAwesome';
        color: @brand-danger;
        top: 3px;
        padding: 3px;
    }
}

/* THE CLASSES BELOW CAN APPEAR ANYWHERE IN THE DOM (POSSIBLY OUTSIDE OF
   THE WIDGET AREA). */

.slide-track {
    /* Slider Track */
    border     : 1px solid #CCCCCC;
    background : #FFFFFF;

    .corner-all(); /* Round the corners of the slide track */
}

.widget-hslider {
    /* Horizontal jQuery Slider

    Both the horizontal and vertical versions of the slider are characterized
    by a styled div that contains an invisible jQuery slide div which
    contains a visible slider handle div.  This is requred so we can control
    how the slider is drawn and 'fix' the issue where the slide handle
    doesn't stop at the end of the slide.

    Both horizontal and vertical sliders have this div nesting:
    +------------------------------------------+
    | widget-(h/v)slider                       |
    |  +--------+---------------------------+  |
    |  | ui-slider                          |  |
    |  |          +------------------+      |  |
    |  |          | ui-slider-handle |      |  |
    |  |          +------------------+      |  |
    |  +--------+---------------------------+  |
    +------------------------------------------+
    */

    width        : @widget-width;

    .slider-container {
        /* Fix the padding of the slide track so the ui-slider is sized
        correctly. */
        padding-left  : 8px;
        padding-right : 2px;
        overflow      : visible;

        /* Default size of the slider */
        flex-grow    : 1;
        height       : 5px;
        max-height   : 5px;
        margin-top   : 15px;
        margin-bottom: 12px;

        /* Style the slider track */
        .slide-track();

        /* Make the div a flex box (makes FF behave correctly). */
        .hbox();

        .ui-slider {
            /* Inner, invisible slide div */
            .hbox();
            .box-flex1();

            border     : 0px;
            background : none;

            .ui-slider-handle {
                width: 12px;
                height: 28px;
                margin-top: -8px;
                border-radius: @border-radius-base;
            }

            .ui-slider-range {
                height     : 12px;
                margin-top : -4px;
            }
        }
    }
}

.widget-vslider {
    /* Vertical jQuery Slider */
    width: 50px;
    height: 250px;

    .slider-container {
        /* Fix the padding of the slide track so the ui-slider is sized
        correctly. */
        padding-bottom : 5px;
        overflow       : visible;
        flex-grow: 1;

        /* Default size of the slider */
        width        : 5px;
        max-width    : 5px;
        margin-left  : auto;
        margin-right : auto;

        /* Style the slider track */
        .slide-track();

        /* Make the div a flex box (makes FF behave correctly). */
        .vbox();

        .ui-slider {
            /* Inner, invisible slide div */
            .vbox();
            .box-flex1();

            border      : 0px;
            background  : none;
            margin-left : -4px;
            margin-top  : 5px;

            .ui-slider-handle {
                width       : 28px;
                height      : 12px;
                margin-left : -9px;
                border-radius: @border-radius-base;
            }

            .ui-slider-range {
                width       : 12px;
                margin-left : -1px;
            }
        }
    }
}

.widget-colorpicker {
    /* Button */
    & {
        width : @widget-width;
    }
    &.short {
        width : @widget-width-short;
    }

    display: flex;

    .input-group {
        flex-grow: 1;
    }
}

.widget-button {
    /* Button */
    width : @widget-width-short;

    .outside-shadow-2dp();

    &.btn,
    &.btn:active,
    &.btn:focus,
    &.btn.hover {
        outline: none !important;
    }

    &.btn:active {
        .outside-shadow-4dp();
    }
}

.widget-checkbox {
    width: @widget-width-short;
}

.widget-toggle-button {
    /* Button */
    width : @widget-width-short;

    .outside-shadow-2dp();

    &.btn,
    &.btn:active,
    &.btn:focus,
    &.btn.hover {
        outline: none !important;
    }

    // &.btn:active {
    //     .outside-shadow-4dp();
    // }
}

.widget-toggle-buttons {

    .btn,
    .btn:active,
    .btn:focus,
    .btn.hover {
        outline: none !important;
    }

    .btn.active {
        box-shadow: none !important;
    }

    .btn-group {
        .outside-shadow-2dp();
    }
}

.widget-text {
    /* Textbox */
    width : @widget-width;
}

.widget-textarea {
    /* TextAreaView */
    width : @widget-width;
}

.widget-listbox {
    /* Listbox */
    width : @widget-width;
}

.widget-dropdown {
    /* Dropdown */
    width : @widget-width;

    .widget_item {
        display: flex;
        flex-grow: 1;
    }

    .widget-combo-btn {
        flex-grow: 1;
        min-width: 10px;
    }

    .dropdown-menu {
        max-height: 200px;
        overflow: hidden;
        overflow-y: auto;
    }
}

.widget-numeric-text {
    /* Single Line Textbox - used for IntTextView and FloatTextView */
    width : @widget-width-short;
}

.widget-hprogress {
    /* Progress Bar */
    width : @widget-width;
    height: 32px;

    .progress {
        flex-grow: 1;
        margin-top: auto;
        margin-bottom: auto;
    }

    .progress-bar {
        /* Disable progress bar animation */
        -webkit-transition : none;
        -moz-transition    : none;
        -ms-transition     : none;
        -o-transition      : none;
        transition         : none;
    }
}

.widget-vprogress {
    /* Progress Bar */
    height: 250px;
    width: 50px;

    .progress {
        flex-grow: 1;
        width: 12px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
    }

    .progress-bar {
        /* Disable progress bar animation */
        -webkit-transition : none;
        -moz-transition    : none;
        -ms-transition     : none;
        -o-transition      : none;
        transition         : none;
    }
}

.widget-combo-btn {
    /* ComboBox Main Button */
    /* Subtract 25px to account for the drop arrow button */
    min-width : @widget-width-short - 25px;
}

.widget_item .dropdown-menu li a {
    color: inherit;
}

.widget-valid {
    /* Valid Check */
    margin-top: 8px;
    margin-bottom: 16px;
    margin-left: 5px;
    margin-right: 5px;
}

.widget-hbox {
    /* Horizontal widgets */
    .hbox();

    input[type="checkbox"] {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    input[type="color"] {
        height: 32px;
        width: 28px;
        padding: 1px;
    }

    .widget-label {
        /* Horizontal Label */
        min-width      : 10ex;
        max-width      : 10ex;
        padding-right  : 8px;
        padding-top    : 5px;
        text-align     : right;
        vertical-align : text-top;

        word-wrap: break-word;
    }

    .widget-readout {
        padding-left   : 4px;
        padding-top    : 5px;
        text-align     : center;
        vertical-align : text-top;
        min-width      : 4em;
        max-width      : 4em;

        word-wrap: break-word;
    }
}

.widget-vbox {
    /* Vertical Widgets */
    .vbox();

    input[type="color"] {
        height: 32px;
        padding: 1px;
    }

    .widget-label {
        /* Vertical Label */
        padding-bottom : 5px;
        text-align     : center;
        vertical-align : text-bottom;
    }

    .widget-readout {
        /* Vertical Label */
        padding-top : 5px;
        text-align     : center;
        vertical-align : text-top;
    }

}

.widget-box {
    /* Box */
    .border-box-sizing();
    .align-start();
}

.widget-radio-box {
    /* Contains RadioButtonsWidget */
    .vbox();
    .border-box-sizing();

    padding-top: 4px;

    label {
        margin-top: 2px;
        margin-bottom: 2px;
        margin-left: 22px;
    }
}
